$(function () {
    getNew();
    $('#new').click(function () {
        $(this).addClass('current').children().addClass('cur');
        $(this).siblings('li').removeClass('current').children().removeClass('cur');
        getNew();
    })
    $('#hot').click(function () {
        $(this).addClass('current').children().addClass('cur');
        $(this).siblings('li').removeClass('current').children().removeClass('cur');
        getHot();
    })
    $('#classify').click(function () {
        $(this).addClass('current').children().addClass('cur');
        $(this).siblings('li').removeClass('current').children().removeClass('cur');
        // getHot();
    })
    function getNew() {
        myajax({
            method: 'GET',
            url: 'http://localhost:3000/play/new',
            success: function (res) {
                let arr = [];
                $.each(res, function (i, val) {
                    arr.push(...val);
                })
                let htmlStr = template('tpl_play', { datas: arr });
                let ul = document.querySelector('.content').querySelector('.cont').querySelector('ul');
                ul.innerHTML = htmlStr;
            }
        })
    }
    function getHot() {
        myajax({
            method: 'GET',
            url: 'http://localhost:3000/play/hot',
            success: function (res) {
                let arr = [];
                $.each(res, function (i, val) {
                    arr.push(...val);
                })
                let htmlStr = template('tpl_play', { datas: arr });
                let ul = document.querySelector('.content').querySelector('.cont').querySelector('ul');
                ul.innerHTML = htmlStr;
            }
        })
    }


})